<template>
  <div class="details-wrapper">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>订单详情</span>
          <!-- 右上角状态 Tag -->
          <el-tag :type="statusInfo.type" round>{{ statusInfo.text }}</el-tag>
        </div>
      </template>

      <!-- 基本信息列表 -->
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单编号">{{ order.id }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="买家">{{ order.buyerName }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ order.buyerPhone || '—' }}</el-descriptions-item>
        <el-descriptions-item label="商品名称" :span="2">{{ order.productName }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ order.quantity }}</el-descriptions-item>
        <el-descriptions-item label="单价">￥{{ order.price }}</el-descriptions-item>
        <el-descriptions-item label="总价" :span="2">
          <el-tag type="success" round>￥{{ order.totalPrice }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ order.remark || '无' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 标签栏（与列表页一致） -->
      <div class="tag-row">
        <el-tag
            v-for="tag in getTags(order)"
            :key="tag.label"
            :type="tag.type"
            effect="plain"
            round
        >
          {{ tag.label }}
        </el-tag>
      </div>

      <!-- 动作按钮 -->
      <div class="action-row">
        <el-button
            v-if="order.confirmation === 0"
            type="warning"
            @click="confirmOrder(order.id)"
        >确认订单</el-button>

        <el-button
            v-else-if="order.stockUp === 0"
            type="success"
            @click="stockUp(order.id)"
        >备货完成</el-button>

        <el-button
            v-else-if="order.sendOrder === 0"
            type="success"
            @click="sendOrder(order.id)"
        >发货</el-button>

        <!-- 待收货阶段不显示任何按钮（买家操作） -->
<!--        <el-button-->
<!--            v-else-if="order.completion === 0"-->
<!--            type="primary"-->
<!--            @click="completeOrder(order.id)"-->
<!--        >确认收货</el-button>-->
                <el-text
                    v-else-if="order.completion === 0"
                    type="primary"
                >待买家收货</el-text>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/Utils/request'
import { ElMessage } from 'element-plus'

export default {
  data() {
    return {
      order: {},    // 订单详情
    };
  },
  computed: {
    /** 当前订单主状态 → 文本 + 颜色 */
    statusInfo() {
      if (this.order.confirmation === 0) return { text: '待确认', type: 'warning' };
      if (this.order.stockUp === 0)      return { text: '已确认', type: 'info' };
      if (this.order.sendOrder === 0)    return { text: '已备货', type: 'success' };
      if (this.order.completion === 0)   return { text: '待收货', type: 'primary' };
      return { text: '已完成', type: 'success' };
    },
  },
  methods: {
    /** 拉取详情（仍用 selectOrders 过滤） */

    fetchOrder() {
      const id = Number(this.$route.params.id)
      request.get('/order/selectOrders')
          .then(res => {
            const row = res.data.find(o => o.id === id)
            if (!row) return ElMessage.error('未找到该订单')

            this.order = {
              ...row,
              stockUp:    row.stockUp    ?? 0,
              sendOrder:  row.sendOrder  ?? 0,
              completion: row.completion ?? 0,
              buyerPhone: row.buyerphone
            }
          })
          .catch(err => {
            console.error(err)
            ElMessage.error('获取订单详情失败')
          })
    },

    /** 标签复用主列表逻辑 */
    getTags(row) {
      const arr = [];
      if (row.confirmation === 0) arr.push({ label: '待确认', type: 'warning' });
      if (row.totalPrice > 1000)  arr.push({ label: '高价值', type: 'success' });
      if (row.remark && /急|尽快/.test(row.remark))
        arr.push({ label: '急单', type: 'danger' });
      if (arr.length === 0) arr.push({ label: '普通', type: 'info' });
      return arr;
    },

    confirmOrder(id) {
      request.put(`/order/confirmation/${id}`)
          .then(() => {
            ElMessage.success('已确认')
            this.fetchOrder()
          })
          .catch(() => {
            ElMessage.error('确认失败')
          })
    },
    stockUp(id) {
      request.put(`/order/stockup/${id}`)
          .then(() => {
            ElMessage.success('备货完成')
            this.fetchOrder()
          })
          .catch(() => {
            ElMessage.error('备货失败')
          })
    },
    sendOrder(id) {
      request.put(`/order/sendorder/${id}`)
          .then(() => {
            ElMessage.success('已发货')
            this.fetchOrder()
          })
          .catch(() => {
            ElMessage.error('发货失败')
          })
    },
    completeOrder(id) {
      request.put(`/order/completion/${id}`)
          .then(() => {
            ElMessage.success('交易完成')
            this.fetchOrder()
          })
          .catch(() => {
            ElMessage.error('确认收货失败')
          })
    }
  },
  mounted() {
    this.fetchOrder();
  },
};
</script>
<style scoped>
.details-wrapper {
  max-width: 900px;
  margin: 32px auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}

.el-descriptions {
  margin-top: 12px;
}

.tag-row {
  margin: 18px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.action-row {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

/* 让 tag 胶囊色调与主列表保持一致 */
.el-tag--warning  { background: #fff7e6; color:#d46b08; border:none; }
.el-tag--success  { background: #f6ffed; color:#389e0d; border:none; }
.el-tag--danger   { background: #fff1f0; color:#cf1322; border:none; }
.el-tag--info     { background: #f0f5ff; color:#2f54eb; border:none; }
.el-tag--primary  { background: #e6f4ff; color:#177ddc; border:none; }

/* 按钮 hover 轻浮起 */
.el-button {
  transition: transform .15s, box-shadow .15s;
}
.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

</style>
